<template>
  <div class="registered-start positRel">
    <div class="main">
      <MenuLocation :title="'线下预约 / 挂号日期 / 选择时间'"></MenuLocation>
      <div class="start-content">
        <div class="doctor-name">
          <img
            class="face"
            src="@/assets/online_consulting/start/face.png"
            alt=""
          />
          <span class="title">问专家</span>
          <span class="name">{{ doctor.realName }}</span>
        </div>
        <div class="choose-consultant">
          <Title :titles="'选择咨询人'" :top="20"></Title>
          <div class="consultant-content">
            <div class="add-consultant" @click="addHandle">
              <img
                class="add-btn"
                src="@/assets/online_consulting/start/add.png"
                alt=""
              />
              <span class="title">添加咨询人</span>
            </div>
            <div
              class="consultant-information"
              v-for="(item, index) in consultantList"
              :key="index"
            >
              <img
                @click="chooseHandle(item, index)"
                class="choose-img"
                :src="
                  personIndex == index
                    ? require('@/assets/online_consulting/start/choosed.png')
                    : require('@/assets/online_consulting/start/choose.png')
                "
                alt=""
              />
              <span class="name">{{ item.username }}</span>
              <span class="id">{{ item.visitCardNo }}</span>
            </div>
          </div>
        </div>
        <div class="site-box" v-if="this.doctor.type == 'experts'">
          <Title :titles="'选择场地'" :top="20"></Title>
          <Select
            v-model="siteId"
            @on-change="handleSite"
            @on-clear="handleSite"
            clearable
            style="width: 40%"
          >
            <Option
              v-for="item in siteList"
              :value="item.id"
              :key="item.id"
              :label="item.siteName"
            >
            </Option>
          </Select>
        </div>
        <Title :titles="'选择时间'" :top="30"></Title>
        <div class="choose-date">
          <img
            class="left-btn"
            src="@/assets/registered/next.png"
            alt=""
            @click="getDate(-7)"
          />
          <div class="date-content">
            <table class="tab">
              <thead>
                <tr>
                  <td v-for="item in dateList" :key="item.id">
                    {{ item.day }}
                  </td>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td
                    v-for="(item, index) in dateList"
                    :key="item.id"
                    :style="
                      index == current
                        ? 'background:#FD5151'
                        : 'background:#fff'
                    "
                    @click="chooseDate(index)"
                  >
                    <span
                      class="date"
                      :style="index == current ? 'color:#fff' : 'color:#FD5151'"
                      >{{ item.month < 10 ? `0${item.month}` : item.month }}-{{
                        item.date < 10 ? `0${item.date}` : item.date
                      }}</span
                    >
                    <span
                      class="is-have"
                      :style="index == current ? 'color:#fff' : 'color:#9A9A9A'"
                      >{{ item.num > 0 ? "有" : "无" }}</span
                    >
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <img
            class="right-btn"
            src="@/assets/registered/next.png"
            alt=""
            @click="getDate(7)"
          />
        </div>
        <div class="time-row">
          <div v-for="(item, index) in onlineTime" :key="index">
            <div
              v-if="item.remainder > 0"
              class="time"
              :style="index ? 'margin-left:calc(12/ 1920 * 100vw)' : ''"
            >
              <span>{{ item.timeSlot }}</span>
              <img
                class="choose"
                :src="
                  timeIndex == index
                    ? require('@/assets/online_consulting/start/choosed.png')
                    : require('@/assets/online_consulting/start/choose.png')
                "
                alt=""
                @click="chooseTime(item, index)"
              />
            </div>
          </div>
        </div>
        <div class="sure-btn" @click="sureHandle()">确认咨询</div>
      </div>
    </div>
    <Footer :top="20"></Footer>
    <div class="add-modal">
      <Modal
        v-model="isShow"
        title="添加咨询人"
        @on-ok="ok"
        @on-cancel="cancel"
        width="800"
        ok-text="添加"
      >
        <div class="name-row">
          <span class="title-row">姓名</span>
          <Input
            v-model="addConsultant.name"
            placeholder="请输入姓名"
            style="width: 100%"
          />
        </div>
        <div class="name-row">
          <span class="title-row">身份证号</span>
          <Input
            v-model="addConsultant.idCard"
            placeholder="请输入身份证号"
            style="width: 100%"
          />
        </div>
        <div class="name-row">
          <span class="title-row">性别</span>
          <RadioGroup v-model="addConsultant.sex">
            <Radio :label="1">男</Radio>
            <Radio :label="0">女</Radio>
          </RadioGroup>
        </div>
        <div class="name-row">
          <span class="title-row">出生日期</span>
          <Row>
            <Col span="12">
              <DatePicker
                type="date"
                placeholder="请选择出生日期"
                v-model="addConsultant.born"
                style="width: 200px"
              ></DatePicker>
            </Col>
          </Row>
        </div>
        <div class="name-row">
          <span class="title-row">手机号</span>
          <Input
            v-model="addConsultant.phone"
            placeholder="请输入手机号"
            style="width: 100%"
          />
        </div>
      </Modal>
    </div>
  </div>
</template>
<script>
import Footer from "@/components/footer/my_footer.vue";
import Title from "@/pages/online_consulting/title.vue";
import MenuLocation from "@/components/myComponents/menuLocation.vue";
import { getSiteAll } from "@/api/myAttention";
import {
  getDoctor,
  bindDoctor,
  findDoctor,
  findWeek,
  addPatienti,
} from "@/api/doctor.js";
export default {
  data() {
    return {
      site: null,
      siteList: [], //场地列表
      //咨询人信息
      consultantList: [],
      doctor: {},
      //时间列表
      dateList: [],
      //总数
      total: 0,
      //选择咨询人
      current: 0,
      //添加咨询人信息
      addConsultant: {
        name: "",
        idCard: "",
        sex: "1",
        born: "",
        phone: "",
      },
      //弹窗显示
      isShow: false,
      //时间段选中
      timeIndex: 0,
      onlineTime: [],
      personIndex: Number,
      birthday: "",
      checkTime: 0,
      expertId: "",
      siteId: "",
      sitList: [],
      visitCardNo: "",
      person: "",
      sex: 0,
      siteRoomTimeId: "",
      checksiteTime: "",
      userId: "",
    };
  },
  components: {
    Footer,
    Title,
    MenuLocation,
  },
  beforeCreate() {
    this.$set(this.expertId, "expertId", localStorage.getItem("expertId"));
    this.$set(this.siteId, "siteId", localStorage.getItem("siteId"));
  },
  mounted() {
    this.doctor = this.$route.query.doctor;
    this.expertId = this.$route.query.doctor.expertId || this.expertId;
    this.siteId = this.$route.query.doctor.siteId || this.siteId;
    this.current = this.$route.query.doctor.visitDate || 0;
    if (this.doctor.type == "experts") {
      //专家跳转过来清空场地id
      localStorage.removeItem("siteId");
    }
    this.getDate();
    this.getdoctor();
    this.finddoctor();
    this.findweek();
    this.getInit();
  },
  methods: {
    getInit() {
      getSiteAll(this.expertId).then((res) => {
        const { code, result } = res;
        if (code == 200) {
          this.siteList = result;
        }
      });
    },
    // 查询绑定的咨询人
    getdoctor() {
      getDoctor().then((res) => {
        if (res.success) {
          this.consultantList = res.result;
        }
      });
    },
    handleSite(val) {
      if (val) {
        this.siteId = val;
        this.findweek();
        this.finddoctor();
      }
    },
    // 查询医生坐班时间
    finddoctor() {
      if (!this.siteId) {
        return false;
      }
      let data = {
        expertId: this.expertId || localStorage.getItem("expertId"),
        siteId: this.siteId || localStorage.getItem("siteId"),
        week: this.checkTime,
      };
      findDoctor(data).then((res) => {
        this.onlineTime = [];
        if (res.success) {
          this.onlineTime = res.result;
          this.siteRoomTimeId = res.result[0].siteRoomTimeId;
          this.checksiteTime = res.result[0].timeSlot;
        }
      });
    },
    // 查询医生一周坐班
    findweek() {
      if (!this.siteId) {
        return false;
      }
      let data = {
        expertId: this.expertId || localStorage.getItem("expertId"),
        siteId: this.siteId || localStorage.getItem("siteId"),
      };
      findWeek(data).then((res) => {
        if (res.success) {
          this.sitList = res.result;
          for (let key in this.sitList) {
            for (let i = 0; i < this.dateList.length; i++) {
              if (this.dateList[i].id == key) {
                this.dateList[i].num = this.sitList[key];
                // this.finddoctor();
              }
            }
          }
        }
      });
    },
    //咨询人切换选中
    chooseHandle(item, index) {
      this.personIndex = index;
      this.consultantList.forEach((item) => {
        item.checked = false;
      });
      this.birthday = item.birthday;
      this.visitCardNo = item.visitCardNo;
      this.person = item.username;
      this.userId = item.userId;
      this.sex = item.sex;
      this.consultantList[index].checked = !this.consultantList[index].checked;
    },
    ok() {
      let data = {
        username: this.addConsultant.name,
        idCard: this.addConsultant.idCard,
        sex: this.addConsultant.sex,
        birthday: this.addConsultant.born,
        mobile: this.addConsultant.phone,
        userId: JSON.parse(localStorage.getItem("userInfo")).id,
      };
      bindDoctor(data).then((res) => {
        if (res.success) {
          this.getdoctor();
        }
      });
    },
    cancel() {},
    //添加咨询人
    addHandle() {
      this.isShow = true;
    },
    getDate(num = 0) {
      this.dateList = [];
      this.total += num;
      const date = new Date();
      const dayTime = 24 * 60 * 60 * 1000;
      const times = date.getTime() + this.total * dayTime;
      for (let i = 0; i < 7; i++) {
        const day = new Date(times + dayTime * i).getDay();
        const date = new Date(times + dayTime * i).getDate();
        const month = new Date(times + dayTime * i).getMonth();
        const year = new Date(times + dayTime * i).getFullYear();
        if (day == 1) {
          this.dateList.push({
            day: "周一",
            date: date,
            month: month + 1,
            year,
            id: day,
          });
        } else if (day == 2) {
          this.dateList.push({
            day: "周二",
            date: date,
            month: month + 1,
            year,
            id: day,
          });
        } else if (day == 3) {
          this.dateList.push({
            day: "周三",
            date: date,
            month: month + 1,
            year,
            id: day,
          });
        } else if (day == 4) {
          this.dateList.push({
            day: "周四",
            date: date,
            month: month + 1,
            year,
            id: day,
          });
        } else if (day == 5) {
          this.dateList.push({
            day: "周五",
            date: date,
            month: month + 1,
            year,
            id: day,
          });
        } else if (day == 6) {
          this.dateList.push({
            day: "周六",
            date: date,
            month: month + 1,
            year,
            id: day,
          });
        } else if (day == 0) {
          this.dateList.push({
            day: "周日",
            date: date,
            month: month + 1,
            year,
            id: 7,
          });
        }
      }
      this.checkTime = this.dateList[this.current].id;
    },
    chooseDate(index) {
      this.current = index;
      this.siteRoomTimeId = "";
      this.checkTime = this.dateList[index].id;
      this.finddoctor();
    },
    //选择时间段
    chooseTime(item, index) {
      this.timeIndex = index;
      this.siteRoomTimeId = item.siteRoomTimeId;
      this.checksiteTime = item.timeSlot;
    },
    //确认咨询
    sureHandle() {
      if (localStorage.getItem("consultPrice") == 0) {
        let data = {
          expertId: localStorage.getItem("expertId"),
          siteId: localStorage.getItem("siteId") || this.siteId,
          visitCardNo: this.visitCardNo,
          userId: this.userId,
          siteRoomTimeId: this.siteRoomTimeId,
        };
        console.log(data);
        addPatienti(data).then((res) => {
          if (res.success) {
            this.$Message.success("预约成功");
            this.$router.push({
              path:"/registered"
            })
          }
        });
      } else {
        if (!this.person) {
          this.$Message.warning("就诊卡号不能为空");
          return
        }
        if (!this.checksiteTime) {
          this.$Message.warning("就诊时段不能为空");
          return
        }
        let date = "";
        this.dateList.map(i=>{
          if (this.checkTime == i.id) date = i;
        })
        localStorage.setItem("dateInfo", JSON.stringify(date));
        localStorage.setItem("personName", this.person);
        localStorage.setItem("sex", this.sex);
        localStorage.setItem("birthday", this.birthday);
        localStorage.setItem("timeSlot", this.checksiteTime);
        localStorage.setItem("visitCardNo", this.visitCardNo);
        localStorage.setItem("userId", this.userId);

        // localStorage.setItem("siteName", this.siteName);
        let data = {
          date,
          siteRoomTimeId: this.siteRoomTimeId,
          // siteId: this.$route.query.doctor.siteId,
          siteId: localStorage.getItem("siteId"),
          // expertId: this.$route.query.doctor.expertId,
          expertId: localStorage.getItem("expertId"),
          visitCardNo: this.visitCardNo,
        };
        // if (localStorage.getItem("consultPrice") == 0) {
        this.$router.push({
          path: "/registered_pay",
          query: {
            data: data,
          },
        });
      }
      // } else {
      //   goSave(data).then((res) => {
      //     if (res.success) {
      //       this.$Message.success("添加成功");
      //       localStorage.setItem("personName", this.person);
      //       localStorage.setItem("sex", this.sex);
      //       localStorage.setItem("timeSlot", this.checksiteTime);
      //       // localStorage.setItem("siteName", this.siteName);
      //       setTimeout(() => {
      //         this.$router.push({
      //           path: "/registered_pay",
      //           query: {
      //             data: data,
      //           },
      //         });
      //       }, 2000);
      //     }
      //     console.log(res);
      //   });
      // }
      // let data = {
      //   expertId: this.$route.query.doctor.expertId,
      //   visitCardNo: this.visitCardNo,
      //   siteId: this.$route.query.doctor.siteId,
      //   person: this.person,
      //   realName: this.doctor.realName,
      //   siteName: this.$route.query.doctor.siteName,
      //   sex: this.sex,
      //   siteRoomTimeId: this.siteRoomTimeId,
      //   timeSlot:this.checksiteTime
      // };
      // console.log(data);
      // this.$router.push({
      //   path: "/registered_pay",
      //   query: {
      //     data: data,
      //   },
      // });
    },
  },
};
</script>
<style lang="scss" scoped>
.registered-start {
  min-height: calc(100vh - (80 / 1920 * 100vw));
  .main {
    padding: 0px calc(360 / 1920 * 100vw);
    display: flex;
    flex-direction: column;
    .start-content {
      background: #fff;
      padding: calc(33 / 1920 * 100vw) calc(20 / 1920 * 100vw)
        calc(73 / 1920 * 100vw);
      border-radius: calc(5 / 1920 * 100vw);
      .doctor-name {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #f1f1f1;
        padding-bottom: calc(18 / 1920 * 100vw);
        .face {
          width: calc(16 / 1920 * 100vw);
          height: calc(18 / 1920 * 100vw);
          margin-left: calc(10 / 1920 * 100vw);
        }
        .title {
          color: #747474;
          font-size: calc(16 / 1920 * 100vw);
          margin-left: calc(7 / 1920 * 100vw);
        }
        .name {
          color: #2d2d2d;
          font-size: calc(18 / 1920 * 100vw);
          margin-left: calc(16 / 1920 * 100vw);
        }
      }
      .choose-consultant {
        .consultant-content {
          margin-top: calc(30 / 1920 * 100vw);
          display: flex;
          .add-consultant {
            width: calc(300 / 1920 * 100vw);
            height: calc(100 / 1920 * 100vw);
            background: #f8f8f8;
            border-radius: calc(4 / 1920 * 100vw);
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            .add-btn {
              width: calc(16 / 1920 * 100vw);
              height: calc(15 / 1920 * 100vw);
            }
            .title {
              color: #333333;
              font-size: calc(14 / 1920 * 100vw);
              margin-left: calc(10 / 1920 * 100vw);
            }
          }
          .consultant-information {
            width: calc(300 / 1920 * 100vw);
            height: calc(100 / 1920 * 100vw);
            background: #f8f8f8;
            border-radius: calc(4 / 1920 * 100vw);
            margin-left: calc(14 / 1920 * 100vw);
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            .choose-img {
              width: calc(18 / 1920 * 100vw);
              height: calc(18 / 1920 * 100vw);
              position: absolute;
              top: calc(12 / 1920 * 100vw);
              right: calc(10 / 1920 * 100vw);
              border-radius: calc(9 / 1920 * 100vw);
              overflow: hidden;
              cursor: pointer;
            }
            .name {
              margin-left: calc(30 / 1920 * 100vw);
              font-size: calc(14 / 1920 * 100vw);
            }
            .id {
              margin-left: calc(30 / 1920 * 100vw);
            }
          }
        }
      }

      .choose-date {
        padding: calc(24 / 1920 * 100vw) calc(12 / 1920 * 100vw);
        background: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left-btn {
          transform: rotate(180deg);
          width: calc(24 / 1920 * 100vw);
          height: calc(41 / 1920 * 100vw);
          cursor: pointer;
        }
        .date-content {
          .tab {
            display: flex;
            flex-direction: column;
            > thead {
              > tr {
                display: flex;
                > td {
                  width: calc(150 / 1920 * 100vw);
                  text-align: center;
                  border: 1px solid #dddddd;
                  display: block;
                  background: #f2f2f2;
                  height: calc(30 / 1920 * 100vw);
                  line-height: calc(30 / 1920 * 100vw);
                }
              }
            }
            > tbody {
              > tr {
                display: flex;
                > td {
                  width: calc(150 / 1920 * 100vw);
                  text-align: center;
                  border: 1px solid #dddddd;
                  display: block;
                  padding: calc(8 / 1920 * 100vw) 0px;
                  cursor: pointer;
                  span {
                    display: block;
                  }
                  > span:first-of-type {
                    color: #fd5151;
                    font-size: calc(16 / 1920 * 100vw);
                  }
                  > span:last-of-type {
                    color: #9a9a9a;
                    font-size: calc(12 / 1920 * 100vw);
                  }
                }
              }
            }
          }
        }
        .right-btn {
          width: calc(24 / 1920 * 100vw);
          height: calc(41 / 1920 * 100vw);
          cursor: pointer;
        }
      }
      .time-row {
        display: flex;
        flex-wrap: wrap;
        margin-top: calc(20 / 1920 * 100vw);
        .time {
          width: calc(219 / 1920 * 100vw);
          height: calc(86 / 1920 * 100vw);
          border-radius: calc(4 / 1920 * 100vw);
          background: #f8f8f8;
          position: relative;
          font-size: calc(14 / 1920 * 100vw);
          color: #333333;
          text-align: center;
          line-height: calc(86 / 1920 * 100vw);
          .choose {
            width: calc(18 / 1920 * 100vw);
            height: calc(18 / 1920 * 100vw);
            border-radius: calc(9 / 1920 * 100vw);
            position: absolute;
            top: calc(12 / 1920 * 100vw);
            right: calc(12 / 1920 * 100vw);
            cursor: pointer;
          }
        }
      }
      .sure-btn {
        width: calc(160 / 1920 * 100vw);
        height: calc(48 / 1920 * 100vw);
        background: #fd5151;
        font-size: calc(18 / 1920 * 100vw);
        color: #fff;
        cursor: pointer;
        text-align: center;
        line-height: calc(48 / 1920 * 100vw);
        border-radius: calc(4 / 1920 * 100vw);
        margin-left: auto;
        margin-top: calc(312 / 1920 * 100vw);
      }
    }
  }
}
:deep(textarea.ivu-input) {
  height: calc(221 / 1920 * 100vw) !important;
}
:deep(.name-row) {
  display: flex;
  align-items: center;
  margin-top: 29px;
}
:deep(.name-row:last-of-type) {
  margin-bottom: 40px;
}
:deep(.title-row) {
  display: inline-block;
  width: 65px;
  text-align: right;
  font-size: 14px;
}
:deep(.ivu-input) {
  margin-left: 10px;
}
:deep(.ivu-radio-group) {
  margin-left: 10px;
}
:deep(.ivu-modal-footer) {
  border-top: none;
}
:deep(.ivu-modal-header-inner) {
  text-align: center;
  font-size: 20px;
}
:deep(.ivu-modal-header) {
  border: none;
}
</style>
